<template>
	<view class="selfSign-container">
		<h-card title="签名档" margin="0 0 0" padding="0 25rpx 25rpx" br="0">
			<view class="sign-container">
				<canvas class="firstCanvas" canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
						@touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
				</canvas>
				<view class="clear" @click="clearClick">清除</view>
				<view class="btns-container">
					<!--<view class="clearSign" @tap='goBack'>返 回</view>-->
					<view class="submit" @tap="submit">确 定</view>
				</view>
			</view>
		</h-card>
	</view>
</template>

<script>
import { uploadMaintenanceSignature } from "@/api"
let content = null
let touchs = []
let canvasw = 0
let canvash = 0
let _that
//获取系统信息
uni.getSystemInfo({
	success: function(res) {
		canvasw = res.windowWidth;
		canvash = res.windowHeight;
	},
})
export default {
    name:'selfSign',//物业签名
    data() {
        return {
            isEnd: false, // 是否签名
        }
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let _ = this
		_.userId = options.userId
        //获得Canvas的上下文
        content = wx.createCanvasContext('firstCanvas')
        //设置线的颜色
        content.setStrokeStyle("#000")
        //设置线的宽度
        content.setLineWidth(5)
        //设置线两端端点样式更加圆润
        content.setLineCap('round')
        //设置两条线连接处更加圆润
        content.setLineJoin('round')
    },
    methods: {
       	//签名提交
        async submit() {
            let _ = this
            if (!this.isEnd) return uni.$u.toast('请完成签名！')
			uni.canvasToTempFilePath({
				canvasId: 'firstCanvas',
				success: function(res) {
					uni.uploadFile({
						url: _.$C.upload,
						filePath: res.tempFilePath,
						name: 'file',
						header: {
							'Authorization': uni.getStorageSync('Authorization'),
						},
						formData: {},
						success: async function(res) {
							let ajaxData = JSON.parse(res.data)
							if(ajaxData.code == 200) {
								let uploadData = {
                                    maintenanceStaffId: _.userId,
                                    electronicSignature: ajaxData.data.fileId
								}
								const { data: res2 } = await uploadMaintenanceSignature(uploadData)
								if (res2.code == 200) {
									uni.navigateBack({url: '/pages_sub1/other/user/index'})
									uni.$u.toast('提交成功！')
								} else {
									uni.$u.toast(res2.msg||'提交失败！')
								}
							}else{
								uni.$u.toast(ajaxData.msg ||'上传失败！')
							}
						}
					})
				}
			})
        },

        // 画布的触摸移动开始手势响应
        start(event) {
            // console.log(event)
            console.log("触摸开始" + event.changedTouches[0].x)
            console.log("触摸开始" + event.changedTouches[0].y)
            //获取触摸开始的 x,y
            let point = {
                x: event.changedTouches[0].x,
                y: event.changedTouches[0].y
            }
            // console.log(point)
            touchs.push(point);

        },
        // 画布的触摸移动手势响应
        move(e) {
            let point = {
                x: e.touches[0].x,
                y: e.touches[0].y
            }
            // console.log(point)
            touchs.push(point)
            if (touchs.length >= 2) {
                this.draw(touchs)
            }
        },

        // 画布的触摸移动结束手势响应
        end(e) {
            console.log("触摸结束" + e)
            // 设置为已经签名
            this.isEnd = true
            // 清空轨迹数组
            for (let i = 0; i < touchs.length; i++) {
                touchs.pop()
            }

        },

        // 画布的触摸取消响应
        cancel(e) {
            console.log("触摸取消" + e)
        },

        // 画布的长按手势响应
        tap(e) {
            console.log("长按手势" + e)
        },

        error(e) {
            console.log("画布触摸错误" + e)
        },

        //绘制
        draw(touchs) {
            console.log(touchs[0],touchs[1])
            let point1 = touchs[0]
            let point2 = touchs[1]
            touchs.shift()
            content.moveTo(point1.x, point1.y)
            content.lineTo(point2.x, point2.y)
            content.stroke()
            content.draw(true)
        },
        //清除操作
        clearClick() {
            // 设置为未签名
            this.isEnd = false
            //清除画布
            content.clearRect(0, 0, canvasw, canvash)
            content.draw(true)
        },
		/** */
        goBack(){
            let _ = this
            uni.navigateBack({url: '/pages_sub1/other/user/index'})
		}
    },
}
</script>
<style lang="scss" scope>
@import 'index.scss';
</style>

